<template>
  <view class="loadBox" v-if="props.status">
    <uniLoadMore
      color="#007AFF"
      iconType="circle"
      status="loading"
      :showText="false"
    ></uniLoadMore>
  </view>
</template>

<!-- 加载中组件 -->
<script lang="ts" setup>
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue'
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

const props = defineProps({
  status:{
    type:Boolean,
    default:true,
  }
})

//数据加载状态
const loadStatus = ref<boolean>(true)

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">

.loadBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: load 0.5s ease-in 0s 1 forwards;
  z-index: 9;
}
@keyframes load {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: rgba(222, 219, 219, 0.162);
  }
}

</style>